<template>
	<view class="container">
		<view class="text"> 请绑定 本人支付宝号 </view>
		<view class="form-box">
			<view class="form-item">
				<view class="label"> 真实姓名 </view>
				<view class="form-content">
					<input type="text" placeholder="请输入你的姓名" placeholder-class="pla-class" v-model="params.username" />
				</view>
			</view>
			<view class="form-item">
				<view class="label"> 支付宝号 </view>
				<view class="form-content">
					<input type="number" placeholder="请输入你的支付宝号" placeholder-class="pla-class"
						v-model="params.cardCode" />
				</view>
			</view>
			<!-- <view class="form-item">
        <view class="label"> 银行 </view>
        <view class="form-content">
          <view class="select" @click="$refs.popup_bank.open()">
            <text v-if="true" class="pla-class">请选择银行</text>
            <text class="val" v-else>银行</text>
          </view>
        </view>
      </view> -->
			<!-- <view class="form-item">
        <view class="label"> 开户行 </view>
        <view class="form-content">
          <input
            type="text"
            placeholder="请输入开户行"
            placeholder-class="pla-class"
          />
        </view>
      </view> -->
			<view class="form-item">
				<view class="label"> 手机号 </view>
				<view class="form-content">
					<input type="number" placeholder="请输入手机号" placeholder-class="pla-class" v-model="params.mobile" />
				</view>
			</view>
		</view>

		<view class="btn">
			<button @click="save()">确认保存</button>
		</view>

		<view class="check-xy" @click="isCheck = !isCheck">
			<image v-if="isCheck" :src="$img_path('/pagesMine/60.png')" mode="widthFix"></image>
			<image v-else :src="$img_path('/pagesMine/61.png')" mode="widthFix"></image>
			<view class="text-xy"> 我已阅读并同意<text @click="openAgreementPopup('绑卡须知')">《绑卡须知》</text> </view>
		</view>
		<view class="kong"></view>

		<popupPicker ref="popup_bank" type="bottom" mode="bank" PVheight="500rpx" :range="bankList"
			@change="bankChange"></popupPicker>
	</view>
</template>

<script>
	import {
		addPayAccount,
		getPayAccount
	} from "@/utils/api/userApi.js";
	import popupPicker from "@/components/popup-picker/popup-picker.vue";
	export default {
		components: {
			popupPicker,
		},
		data() {
			return {
				isCheck: false,
				bankList: [{
						value: 1,
						text: "中国工商银行",
					},
					{
						value: 2,
						text: "中国建设银行",
					},
					{
						value: 3,
						text: "招商银行",
					},
					{
						value: 4,
						text: "中国农业银行",
					},
					{
						value: 5,
						text: "中国银行",
					},
				],
				info: {},
				params: {
					bankCode: "ALIPAY",
					bankName: "支付宝账户", //支付方式名称
					cardCode: "", //支付宝/银行卡号
					mobile: "", //持卡人手机号
					username: "", //持卡人姓名
				},
			};
		},
		onLoad() {
			this.getPayAccount();
		},
		methods: {
			openAgreementPopup(type) {
				console.log('打开协议弹窗', type)
				uni.navigateTo({
					url: "/pagesRegion/servicePersonnelReview/agreement?type=" + type,
				});
			},
			// 获取提现账号
			getPayAccount() {
				getPayAccount().then((res) => {
					console.log(res + "获取提现账号");
				});
			},
			bankChange(val) {
				uni.showLoading();
				console.log(val);
				this.info.gender = val[0] + 1;
				// this.editInfo({gender:String(val[0]+1)})
				this.$refs.popup_bank.close();
			},

			// 保存
			save() {
				if (!this.isCheck) {
					uni.showToast({
						title: "请阅读并同意《绑卡须知》",
						icon: "none",
					});
					return;
				}
				if (!this.params.username) {
					uni.showToast({
						title: "请输入持卡人姓名",
						icon: "none",
					});
					return;
				}
				if (!this.params.cardCode) {
					uni.showToast({
						title: "请输入支付宝号",
						icon: "none",
					});
					return;
				}
				if (!this.params.mobile) {
					uni.showToast({
						title: "请输入手机号",
						icon: "none",
					});
					return;
				}
				addPayAccount(this.params).then((res) => {
					if (res.code == 0) {
						uni.showToast({
							title: res.msg,
							icon: "none",
						});
						return;
					}
					uni.showToast({
						title: "添加成功",
						icon: "none",
					});
					setTimeout(() => {
						uni.navigateBack();
					}, 1000);
				});
			},
		},
	};
</script>

<style>
	page {
		background-color: #f8f8f8;
	}

	/deep/ .bgF {
		border-radius: 40rpx 40rpx 0 0 !important;
	}
</style>
<style lang="scss" scoped>
	.container {
		padding: 0 22rpx;
		box-sizing: border-box;

		.text {
			font-weight: 400;
			font-size: 32rpx;
			color: #000000;
			line-height: 40rpx;
			padding-top: 78rpx;
			text-align: center;
		}

		.form-box {
			width: 100%;
			background: #ffffff;
			box-shadow: 0rpx 0rpx 20rpx 2rpx rgba(203, 203, 203, 0.18);
			border-radius: 20rpx;
			padding: 20rpx 0;
			margin-top: 82rpx;

			.form-item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 50rpx 20rpx 50rpx 28rpx;

				&:not(:last-child) {
					border-bottom: 2rpx solid #eeeeee;
				}

				.label {
					font-weight: bold;
					font-size: 32rpx;
					color: #000000;
					line-height: 40rpx;
				}

				.form-content {
					flex: 1;
					text-align: right;

					input,
					.val {
						font-weight: 400;
						font-size: 32rpx;
						color: #333333;
						line-height: 40rpx;
						text-align: right;
					}

					/deep/ .pla-class {
						font-weight: 400;
						font-size: 32rpx;
						color: #b4b4b4;
						line-height: 40rpx;
					}
				}
			}
		}

		.btn {
			padding: 0 22rpx;
			box-sizing: border-box;
			margin-top: 400rpx;

			button {
				width: 100%;
				height: 96rpx;
				background: linear-gradient(135deg, #ffa233 0%, #fb4c4c 100%);
				border-radius: 80rpx;
				font-weight: bold;
				font-size: 36rpx;
				color: #ffffff;
				line-height: 96rpx;
				text-align: center;
			}
		}
	}

	.check-xy {
		display: flex;
		align-items: center;
		margin-top: 26rpx;
		margin-left: 24rpx;

		&>image {
			width: 30rpx;
			height: 30rpx;
		}

		view {
			font-weight: 400;
			font-size: 24rpx;
			color: #333333;
			line-height: 34rpx;
			padding-left: 12rpx;
			box-sizing: border-box;

			text {
				color: #e72a2a;
			}
		}
	}

	.check-xy {
		display: flex;
		justify-content: center;
		margin: 60rpx 0;

		.text-xy {
			font-size: 32rpx !important;
		}
	}
</style>